<template>
  <div class="level-up-body" v-loading="isloading">
    <div class="level-up-top">
      <div class="level-up-top-userinfo">
        <div class="level-up-top-img">
          <div class="level-up-top-img-body">
            <img
              src="http://192.168.2.27:8888/assets/img/login.png"
              alt=""
              v-if="userinfo.userimg == ''"
            />
            <img :src="userinfo.userimg" alt="" v-else />
          </div>
        </div>
        <div class="level-up-top-info">
          <div class="level-info-body">
            <span class="info-user-span">用户{{ userinfo.usernumber }}</span>
            <span class="info-gift-span"
              >开通会员年卡可参与抽奖，有机会得千元奖品</span
            >
            <b :class="userlevelitem">{{ userinfo.level }}</b>
            <span class="over-time-span" v-if="userinfo.overduetime != ''"
              >于 {{ userinfo.overduetime }} 到期</span
            >
          </div>
        </div>
      </div>

      <div class="level-up-top-input">
        <div class="level-input-body">
          <el-input
            v-model="levelinput"
            placeholder="请输入兑换码"
            id="el-level-input"
          >
            <template #append>
              <el-button id="el-level-btn" @click="exchange">兑换</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="level-up-center">
      <div class="level-center-title">
        <div class="level-center-title-body">
          <img src="http://192.168.2.27:8888/assets/img/vip.png" alt="" />
          <span class="title-span">FANG会员</span>
        </div>
      </div>
      <div class="level-up-center-list">
        <ul class="level-list-ul">
          <li
            v-for="(item, index) in testlist"
            :key="item.id"
            :class="this.levelindex == index ? 'level-choose' : ''"
            @click="chooselevelitem(index)"
          >
            <div class="li-top">
              <p>{{ item.leveltitle }}</p>
              <p>
                ￥<span class="price-span">{{ item.VipmouthPrice }}</span
                >/月
              </p>
            </div>
            <div class="li-bottom">
              <span>{{ item.VipPower }}</span>
            </div>
          </li>
        </ul>
        <div class="level-power-div">
          <div class="level-power-body">
            <p class="power-title">FANG VIP会员特权</p>
            <div class="swapper">
              <ul class="swapper-ul">
                <li v-for="item in choosepowerlist" :key="item">
                  <div class="level-li-img">
                    <img :src="item.powerurl" />
                  </div>
                  <div class="level-li-info">{{ item.powertitle }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pay-item">
          <div class="pay-left">
            <div class="code-img">
              <img
                src="http://192.168.2.27:8888/assets/img/QRcode.jpg"
                alt=""
              />
            </div>
            <div class="code-mess"><span class="code-span">扫码支付</span></div>
          </div>
          <div class="pay-right">
            <p>
              实付:<span>{{ testlist[this.levelindex]?.VipAllPrice }}</span
              >元
            </p>
            <el-button type="success" @click="changelevel"
              ><el-icon><CreditCard /></el-icon>微信支付</el-button
            >
            <el-button type="primary" @click="test"
              ><el-icon><CreditCard /></el-icon>支付宝支付</el-button
            >
            <el-button type="danger" @click="change"
              ><el-icon><CreditCard /></el-icon>取消</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import {
  getuserinfo,
  changeuserlevel,
  getlevellist,
  changeoverduetime,
  getallcode,
  changecode,
  getalipay,
} from "network/request.js";
import { CreditCard } from "@element-plus/icons-vue";
import { paymoney } from 'untils/order.js'
export default {
  inject: ["reload"],
  components: {
    CreditCard,
  },

  data() {
    return {
      userinfo: {
        id: "",
        level: "",
        realname: "",
        userid: "",
        userimg: "",
        usernumber: "",
        userpassword: "",
        usersexy: "",
        usertitle: "",
        overduetime: "",
      },
      usertoken: "",
      levelinput: "",
      levelindex: 0,
      testlist: [],
      codelist: [],
      testdata: {
        orderId: "",
        price: 0,
        userid: "",
      },
      isloading: false,
    };
  },
  async created() {
    this.isloading = true;
    this.usertoken = localStorage.getItem("token");
    await getuserinfo(this.usertoken).then(({ data: res }) => {
      //将res[0]转换成字符串后在转换回来
      let nowday = new Date();
      this.userinfo = JSON.parse(JSON.stringify(res[0]));
      // console.log(new Date(this.userinfo.overduetime).getTime());
      // console.log(nowday.getTime());
      //判断用户会员是否过期
      if (
        new Date(this.userinfo.overduetime).getTime() < nowday.getTime() &&
        this.userinfo.overduetime != ""
      ) {
        this.change();
        // console.log(this.userinfo.overduetime)
      }
    });
    //获取会员权限列表
    await getlevellist()
      .then(({ data: res }) => {
        for (let i = 0; i < res.length; i++) {
          this.testlist.push(res[i]);
        }
        this.isloading = false;
      })
      .catch((res) => {
        alert(res.staus);
      });
  },
  methods: {
    //修改选中vip权限
    chooselevelitem(index) {
      // console.log(index);
      this.levelindex = index;
    },
    //用户登录 如果会员过期 则设置为普通用户
    async change() {
      await changeuserlevel(this.userinfo.id, "普通用户");
      await changeoverduetime(this.userinfo.id, "");
      this.reload();
    },
    //用户购买会员 修改level等级
    async changelevel() {
      //当前时间
      let curDate = new Date();
      let buyday = 0;
      switch (this.levelindex) {
        case 0:
          buyday = 30;
          break;
        case 1:
          buyday = 365;
          break;
        case 2:
          buyday = 730;
          break;
        default:
          buyday = 0.001;
      }
      // alert(curDate)
      curDate = new Date((curDate / 1000 + 86400 * buyday) * 1000);
      let overdue = curDate.toLocaleString();
      console.log(overdue);
      if (this.userinfo.level == "会员用户") {
        ElMessage.warning("很抱歉，暂不支持重复购买会员!");
        return;
      }

      await changeuserlevel(this.userinfo.id, "会员用户");
      await changeoverduetime(this.userinfo.id, overdue);
      let type = "会员购买"
      let total = parseFloat(this.testlist[this.levelindex].VipAllPrice)
      let goodlist = [
        {
          goodid: this.testlist[this.levelindex].id,
          goodnum: 1
        }
      ]
      await paymoney(goodlist,this.userinfo.userid,'', total,this.userinfo.usernumber,type)
      ElMessage.success("购买成功!");
      this.reload();
    },
    //提交用户的兑换码
    exchange() {
      if (this.levelinput == "") return ElMessage.warning("请输入兑换码!");
      getallcode(this.levelinput).then(({ data: res }) => {
        // console.log(res)
        res[0].exchangeuser.forEach((item) => {
          this.codelist.push(item);
        });
        let id = res[0].id;
        let curDate = null;
        let codeuser = null;
        //判断用户输入的兑换码是否正确
        if (res.length == 0) {
          return ElMessage.warning("请输入正确的兑换码!");
        }
        //判断已兑换用户列表中是否存在该用户
        if (
          res[0].exchangeuser.some((item) => {
            if (item.user == this.userinfo.usernumber) return true;
          })
        ) {
          return ElMessage.warning("您已使用过该兑换码!");
        }
        let sur = parseInt(res[0].surplusnumber);
        if (sur == 0) {
          return ElMessage.warning("很抱歉，该兑换码已兑完！");
        }
        sur = sur - 1;

        //判断用户是否已经购买会员
        if (this.userinfo.overduetime != "") {
          curDate = new Date(this.userinfo.overduetime);
          console.log(curDate);
        } else {
          curDate = new Date();
        }
        curDate = new Date(
          (curDate / 1000 + 86400 * parseInt(res[0].exchangeday)) * 1000
        );
        curDate = curDate.toLocaleString();

        changeoverduetime(this.userinfo.id, curDate).then(() => {
          ElMessage.success("兑换成功！");
          let nowday = new Date();
          nowday = nowday.toLocaleString();
          codeuser = {
            user: this.userinfo.usernumber,
            codeday: nowday,
          };
          this.codelist.push(codeuser);
          changecode(id, sur, this.codelist);
          this.reload();
        });

        // console.log(this.userinfo.overduetime)
      });
    },
    test() {
      let guidcode = this.Guid();
      this.testdata = {
        orderId: guidcode,
        price: this.testlist[this.levelindex].VipAllPrice,
        userid: this.userinfo.userid,
      };
      // console.log(this.testdata.price)
      getalipay(this.testdata).then((res) => {
        // this.data=res;
        window.open(res.data.result);
      });
    },
    Guid() {
      var guid = "";
      for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if (i == 8 || i == 12 || i == 16 || i == 20) guid += "_";
      }
      return guid;
    },
  },
  computed: {
    //动态返回选中vip权限表
    choosepowerlist: function () {
      return this.testlist[this.levelindex]?.powerlist;
    },
    //动态返回用户等级样式
    userlevelitem() {
      if (this.userinfo.level == "游客用户") {
        return "visiteritem";
      } else if (this.userinfo.level == "普通用户") {
        return "normalitem";
      }
      return "vipitem";
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  .level-up-body {
    width: 100%;
    height: 100vh;
    border-radius: 10px 10px 0 0;
    box-shadow: 3px 3px 15px #ccc;
    background-color: #fff;
    .level-up-top {
      width: 100%;
      background-color: #333;
      background: linear-gradient(45deg, #333, #bbb);
      // background: url("http://img-home.csdnimg.cn/images/20220923031058.png") no-repeat center;
      background-size: cover;
      border-radius: 10px 10px 0 0;
      height: 120px;
      display: flex;
      justify-content: space-between;
      .level-up-top-userinfo {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .level-up-top-img {
    height: 100%;
    width: 90px;
    // background-color: red;
  }
  .level-up-top-img-body {
    /* margin: auto; */
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #ccc;
    border-radius: 50%;
  }
  .level-up-top-img-body > img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .level-up-top-info {
    height: 100%;
    width: 300px;
    // background-color: green;
    position: relative;
  }
  .level-info-body {
    /* background-color: red; */
    width: 100%;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
  }
  .level-up-top-info span {
    display: block;
    margin-bottom: 5px;
  }
  .info-user-span {
    color: white;
    text-align: left;
  }
  .info-gift-span {
    /* background-color: lightskyblue; */
    text-align: left;
    color: #ccc;
    font-size: 14px;
  }
  .over-time-span {
    position: absolute;
    font-size: 14px;
    top: 74%;
    left: 75px;
    color: salmon;
    // letter-spacing: 1px;
    // background-color: red;
  }
  b {
    font-size: 14px;
    font-weight: 500;
    width: 70px;
    height: 20px;
    line-height: 20px;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    color: white;
  }
  .normalitem {
    background: linear-gradient(
      45deg,
      lightskyblue,
      rgb(253, 209, 216),
      rgb(224, 187, 210)
    );
  }
  .visiteritem {
    background: linear-gradient(45deg, green, lightgreen);
  }
  .vipitem {
    background: linear-gradient(
      45deg,
      #b22222,
      rgb(255, 84, 84),
      rgb(255, 171, 171)
    );
  }
  .level-up-top-input {
    height: 100%;
    width: 30%;
    margin-right: 3%;
    /* background-color: yellow; */
    position: relative;
  }
  .level-input-body {
    width: 100%;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
  }
  .input-border-style {
    border: 1px solid #b87100;
    outline-color: #b87100;
    border-radius: 3px;
    padding-left: 10px;
  }
  // #el-level-input {
  //   outline: none;
  //   border: none;
  // }
  #el-level-btn {
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0px;
    background: linear-gradient(90deg, #dca250, #b87100);
  }
  #el-level-btn:hover {
    background: linear-gradient(90deg, #f5c076, #b87100);
  }

  /* 中部div样式 */
  .level-up-center {
    width: 100%;
    // background-color: lightskyblue;
    height: 350px;
    margin-top: -1%;
    border-radius: 10px 10px 0 0;
  }
  .level-center-title {
    background-color: #fff;
    width: 100%;
    height: 20%;
    border-radius: 10px 10px 0 0;
    position: relative;
  }
  .level-center-title-body {
    // width: 20%;
    // background-color: red;
    display: flex;
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translateY(-50%);
  }
  .level-center-title-body .title-span {
    display: inline-block;
    margin: auto 0;
    color: #000;
    font-size: 22px;
    /* letter-spacing: 1px; */
    font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana,
      Roboto, Noto, Helvetica Neue, sans-serif;
  }
  .level-up-center-list {
    width: 100%;
    height: 80%;
    // background-color: red;
  }
  .level-list-ul {
    width: 100%;
    // background-color: yellow;
    height: 50%;
    display: flex;
    justify-content: space-around;
    list-style: none;
  }
  .level-list-ul li {
    height: 90%;
    width: 20%;
    margin: auto 0;
    border-radius: 8px;
    // background-color: green;
    display: flex;
    flex-direction: column;
    border: 2px solid #fae8d0;
    box-sizing: border-box;
  }
  .li-top {
    width: 100%;
    background-color: white;
    height: 75%;
    box-sizing: border-box;
    border-radius: 6px 6px 0 0;
  }
  .li-top > p:nth-child(1) {
    margin: 24px 0 12px 0;
    text-align: center;
    font-size: 16px;
    color: #222226;
    font-weight: 700;
  }
  .li-top > p:nth-child(2) {
    color: #b87100;
    font-size: 12px;
    text-align: center;
    .price-span {
      font-size: 24px;
      color: #b87100;
    }
  }
  .li-bottom {
    width: 100%;
    height: 25%;
    box-sizing: border-box;
    background-color: #fae8d0;
    border-radius: 0 0 6px 6px;
    text-align: center;
    position: relative;
  }
  .li-bottom span {
    width: 100%;
    display: block;
    font-size: 12px;
    // background-color: red;
    color: #69421b;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  //选中level样式
  .level-list-ul .level-choose {
    border: 2px solid #b87100;
    .li-top {
      background-color: #fff9f1;
    }
  }
  .level-power-div {
    width: 100%;
    height: 50%;
    // background-color: red;
    position: relative;
    .level-power-body {
      width: 95%;
      // margin: auto;
      height: 90%;
      background-color: #f8f8f8;
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 8px;
      transform: translate(-50%, -50%);
      padding: 16px 8px;
      .power-title {
        width: 100%;
        margin: 0 0 8px;
        font-size: 16px;
        color: #222226;
        font-weight: 700;
      }
      .swapper {
        width: 100%;
        height: 100%;
        // background-color: red;
        .swapper-ul {
          width: 100%;
          height: 100%;
          display: flex;
          list-style: none;
          justify-content: space-around;
          li {
            width: 18%;
            height: 70%;
            border-radius: 8px;
            background-color: white;
            display: flex;
            &:hover {
              box-shadow: 2px 2px 10px #ccc;
            }
            .level-li-img {
              height: 100%;
              width: 40%;
              // background-color: #ccc;
              position: relative;
              img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                height: 80%;
                vertical-align: top;
              }
            }
            .level-li-info {
              height: 100%;
              width: 60%;
              // background-color: yellow;
              padding: 15px 8px 0 0;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              color: #222226;
              @media screen and (max-width: 768px) {
                & {
                  padding: 13px 5px 10px 0;
                  font-size: 12px;
                  line-height: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
  .pay-item {
    width: 95%;
    height: 60%;
    margin: 10px auto;
    border-radius: 8px;
    background-color: #f8f8f8;
    display: flex;
    padding: 10px 0 10px 10px;
    .pay-left {
      height: 100%;
      width: 14%;
      background-color: #fff;

      .code-img {
        width: 100%;
        height: 80%;
        // background-color: red;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .code-mess {
        height: 20%;
        // background-color: red;
        position: relative;
        .code-span {
          // background-color: yellow;
          color: #000;
          display: block;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 14px;
          transform: translate(-50%, -50%);
          text-align: center;
        }
      }
    }
    .pay-right {
      height: 100%;
      width: 40%;
      // background-color: lightskyblue;
      margin-left: 20px;
      p {
        margin: 33px 0 12px;
        font-size: 12px;
        letter-spacing: 1px;
        span {
          color: #fc5531;
          font-size: 32px;
          font-family: DINCondensed-Bold, DINCondensed;
          line-height: 48px;
          font-weight: 700;
          letter-spacing: normal;
        }
      }
      .el-icon {
        margin-right: 5px;
      }
    }
  }
}
@media  screen and (max-width: 768px) {
  .level-up-top {
    flex-direction: column;
    padding-top: 20px;
    >.level-up-top-userinfo {
      display: flex;
      justify-content: center;
      // background-color: yellow;
    }
    .level-up-top-input {
      width: 80%;
      margin: 10px auto;
    }
  }
}
</style>